<template>
    <div class="container">
        <div style="margin-bottom: 20px;">难度选择：
            <el-radio-group v-model="rank" @input="rankChange">
                <el-radio-button label="简单"></el-radio-button>
                <el-radio-button label="困难"></el-radio-button>
            </el-radio-group>
        </div>
    <el-button type="success" id="playDazi" value="开始打字" :disabled="startedTyping" @click="startExam">开始打字</el-button>
	<div>倒计时</div>  
    <div id="countdown" style="color:red;margin-bottom: 20px;" >300</div>
    <div class="text-to-type" id="text-to-type">我是陆赞赞，我最牛逼了</div>
    <textarea class="input-field" id="input-field" :disabled="typinged" placeholder="在这里输入..."  rows="4" style="resize: none"></textarea>
    <div class="feedback" id="feedback"></div>
    </div>
</template>
<script>
const randomFontListDifficult = "飘豪郝赫戒断可爱奥巴马观海山狼浪朗习远近人入汝儒乳辱劳动古迪迦家嘉驾壹贰叁肆伍米迷密蜜弥中国靓仔高低大小多少兔子象狗猫蛇虫猪鸡鸭鱼肉吃穿山勒簕鳓敷疺婳粿虢尛淼水税谁说肥傅福风分鼬尤喜欢禄寿庆欢娶趣童真稚嫩龙阀阈黑衡是你啊发我金银铜铝光辣蜡才出去哦有修离谱特别疯狂来自希望寒假肯得济南方戎文病李洋穆云超张靖宸陆赞潘江涛黄凤配沈雨卢霖王快乐慈溪农村商业和美丽服务玲珑饕餮悖论北仑杯背冲锋圣湖神话申花"
const randomFontListEasy = "大小多少卢霖希西东南北上下左右前后太阳学童同开心妈爸狗猫吃饭喝水洗头手脚"
export default {
    name:'typing',
    data(){
        return {
            startedTyping: false,
            typinged: true,
            targetText: '',
            timerInterval: null,
            useTime: 0,
            correct: 0,
            inputLength: 0,
            targetText: '',
            rank: '简单' //难度
        }
    },
    methods:{
        rankChange(e){ //选择难度
            if(e==='简单'){
                let textToType = document.getElementById('text-to-type');
                textToType.textContent = this.rendomToText(randomFontListEasy)
                this.targetText = textToType.textContent;
            }else{
                let textToType = document.getElementById('text-to-type');
                textToType.textContent = this.rendomToText(randomFontListDifficult)
                this.targetText = textToType.textContent;
            }
        },
        startExam(){ //开始打字
            this.resetCountdown()
	        this.startedTyping = true
            this.typinged = false
	        this.daojishi()
        },
        rendomToText(randomFontList){ //随机排序字符串
	        let letters = randomFontList.split('') //分割字符串为数组
	        for(let i =letters.length - 1;i>0;i--){
		        let j = Math.floor(Math.random()*(i+1));//生成随机索引
		        let temp = letters[i]; //交换字母位置
		        letters[i] = letters[j];
		        letters[j] = temp;
	        }
	        let shuffledStr = letters.join(''); //将字符串数组转换回字符串
	        return shuffledStr+"        ";
	    },
        renderText(typedText) { // 初始化文本显示
            let newHTML = '';
            let zhengque = 0;
            this.inputLength  = typedText.length
            for (let i = 0; i < this.targetText.length; i++) {
                const targetChar = this.targetText[i];
                const typedChar = typedText[i];
                if (typedChar === undefined) {
                    newHTML += targetChar; // 未输入的字符保持默认颜色
                } else if (typedChar === targetChar) {
                    newHTML += `<span class="correct-char">${targetChar}</span>`; // 正确字符
	                zhengque ++ 
	            } else {
                    newHTML += `<span class="incorrect-char">${targetChar}</span>`; // 错误字符
                }
            }
            this.correct = zhengque;
            document.getElementById('text-to-type').innerHTML = newHTML;
        },
	    resetCountdown(){ //重置倒计时
		    clearInterval(this.timerInterval)
	    },
        daojishi(){ //倒计时
	        let daojishiSecond = 300  //5分钟
	        this.timerInterval = setInterval(()=>{
		        daojishiSecond--
		        if(daojishiSecond<0){
		            clearInterval(this.timerInterval)
		            document.getElementById('countdown').innerText = '时间到!'
                    this.typinged = true
		        }else{
		            document.getElementById('countdown').innerText = daojishiSecond
		            this.useTime++
		        }
		    }, 1000)
	    },
    },
    mounted(){
	    // 将离散的字符串显示在页面上
        let textToType = document.getElementById('text-to-type');
        textToType.textContent = this.rendomToText(randomFontListEasy)
        this.targetText = textToType.textContent;


        const inputField = document.getElementById('input-field')
        const feedback = document.getElementById('feedback')

        // 监听输入
        inputField.addEventListener('input', () => {
            const typedText = inputField.value;
            // 渲染文本
            this.renderText(typedText);
		
	        //计算准确率
	        let acc = this.correct / this.inputLength  * 100
	        
	
	        //计算打字速度
	        let speed = this.correct / this.useTime 


            // 判断输入是否正确
            if (typedText === this.targetText) { //正确
                inputField.classList.remove('incorrect');
                inputField.classList.add('correct');
                feedback.textContent = '准确率：' + acc + '% ，正确个数：'+ this.correct + '个，打字速度：' + speed + '个每秒，用时' + this.useTime + '秒'
                feedback.classList.remove('incorrect');
                feedback.classList.add('correct');
 	            this.typinged = true
            } else if (this.targetText.startsWith(typedText)) {
                inputField.classList.remove('incorrect');
                inputField.classList.remove('correct');
                feedback.textContent = '准确率：' + acc + '% ，正确个数：'+ this.correct +'个，打字速度：' + speed + '个每秒';

            } else { //错误
                inputField.classList.remove('correct');
                inputField.classList.add('incorrect');
                feedback.textContent = '准确率：' + acc + '% ，正确个数：'+ this.correct + '个，打字速度：' + speed + '个每秒';
                feedback.classList.remove('correct');
                feedback.classList.add('incorrect');
            }

            //全部输入完了
	        if(this.inputLength===this.targetText.length){
	            feedback.textContent = '准确率：' + acc + '% ，正确个数：'+ this.correct + '个，打字速度：'  + speed + '个每秒，用时' + this.useTime + '秒';
	            this.typinged = true
	            feedback.classList.remove('incorrect');
                feedback.classList.add('correct');
	        }

        });  
    },
}
</script>
<style>
.container {
            text-align: center;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0010pxrgba(0, 0, 0, 0.1);
        }

        .text-to-type {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
            white-space: pre-wrap;
        }

        .input-field {
            width: 100%;
            padding: 10px0;
            font-size: 18px;
            border: 2px solid #ccc;
            border-radius: 5px;
            outline: none;
            text-indent: 10px;
        }

        .input-field.correct {
            border-color: green;
        }

        .input-field.incorrect {
            border-color: red;
        }

        .feedback {
            margin-top: 10px;
            font-size: 18px;
        }

        .feedback.correct {
            color: green;
        }

        .feedback.incorrect {
            color: red;
        }

        .correct-char {
            color: green;
        }

        .incorrect-char {
            color: red;
        }
</style>